import React, { memo, useEffect } from "react";
import { renderRoutes } from "react-router-config";
import { withRouter } from "react-router-dom";
import CustomSider from "../Sider";
import LeftSider from "../LeftSider";

// Breadcrumb
import { Layout, Breadcrumb } from "antd";

import "./index.css";

const { Header, Content, Footer, Sider } = Layout;

export default memo(
  withRouter(function Main(props) {
    const { history, location, route } = props;
    const { redirect, children } = route;
    const { pathname } = location;
    console.log(route, "props.route", location);
    useEffect(() => {
      if (pathname === "/") history.push(redirect);
    }, [history, pathname, redirect]);
    return (
      <Layout style={{ height: "100%" }} id="main-layout-top-side">
        <Header className="header">
          <div className="logo" />
          <CustomSider theme="dark" />
        </Header>
        <Content style={{ padding: "0 50px", overflow: "hidden" }}>
          <Breadcrumb style={{ margin: "16px 0" }}>
            <Breadcrumb.Item>Home</Breadcrumb.Item>
            <Breadcrumb.Item>List</Breadcrumb.Item>
            <Breadcrumb.Item>App</Breadcrumb.Item>
          </Breadcrumb>
          <Layout
            className="site-layout-background"
            style={{ padding: "24px 0", height: "100%" }}
          >
            <Sider className="site-layout-background" width={200}>
              <LeftSider pathname={pathname} />
            </Sider>
            <Content style={{ padding: "0 24px", minHeight: 280 }}>
              {renderRoutes(children)}
            </Content>
          </Layout>
        </Content>
        <Footer style={{ textAlign: "center" }}>
          Ant Design ©2018 Created by Ant UED
        </Footer>
      </Layout>
    );
  })
);
